<template>
	<view class="container">
		<view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp">
			<!-- 进度条 -->
			<!-- <view style="height: 100%;">
				<view class="progress" :style="setProStyle">
					<view class="percent" :style="[slidStyle]">{{percent}}%</view>
				</view>
			</view> -->
			<!-- style="height: 100%;" -->
			<!-- <view> -->
				<view class="progress" :style="setProStyle">
					<view class="percent" :style="[slidStyle]">{{percent}}%</view>
				</view>
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "progress-app",
		props: {
			width: { // 宽度
				type: Number,
				default: 660
			},
			color: { // 颜色
				type: String,
				default: '#0076f6'  // '#0076f6'
			},
			percent: {  // 进度百分比
				type: Number,
				default: 10
			}
		},
		data() {
			return {
				hasProgress: true,
				currPercent: null,
				// widthStr: `${this.width}rpx`,
				widthStr: null,
				timer: null
			};
		},
		// created() {
		// 	setTimeout(()=>{
		// 		// 重置进度条
		// 		this.currPercent = 0
		// 		console.log('this',this.percent);
		// 	},500)
		// },
		mounted() {
			// if(this.percent) {
			// 	this.timer = setInterval(()=>{
			// 		if(this.percent == this.currPercent) clearInterval(this.timer)
			// 		this.currPercent += 1
			// 	},10)
			// }
			setTimeout(()=>{
				this.widthStr = `${this.width}rpx`
			},600)
		},
		updated() {
			// 重置进度条
			// this.currPercent = 0
			
			// // if(this.percent) this.currPercent = this.percent
			// this.widthStr = `${this.width}rpx`
			console.log('percent',this.percent);
			// console.log('widthStr',this.currPercent);
		},
		computed: {
			//设置进度条样式，实时更新进度位置
			setProStyle() {
				return {
					width: this.percent + '%' // 510：按钮进度条宽度
					// width: (this.width * this.currPercent / 100) + 'rpx' // 510：按钮进度条宽度
				}
			},
			slidStyle(){
				if(this.percent == 0){
					return {
						right: 'calc(0% - 82rpx)'
					}
				}
				else if(this.percent > 50){
					return {
						right: 'calc(-1%)'
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.progress-view {
		width: v-bind(widthStr);
		height: 14rpx;
		border-radius: 20rpx;
		background-color: #dcdcdc;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0px;
		box-sizing: border-box;
		border: none;
		// border:1px solid green;

		&.active {
			background-color: v-bind(color);
		}

		.progress {
			height: 100%;
			background-color: v-bind(color);
			padding: 0px;
			box-sizing: border-box;
			border: none;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			position: relative;
			// border:1px solid red;
			animation: all .6s linear .6s;
			
			.percent{
				position: absolute;
				top: 50%;
				right: calc(0% - 82rpx);
				transform: translateY(-50%);
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 82rpx;
				height: 46rpx;
				border-radius: 30rpx;
				background-color: v-bind(color);
				// opacity: .3;
			}
		}
	}
</style>